
/*****************************************************************************
= Global resets and element defaults
******************************************************************************/

/* Reset font size for all elements to a single standard (16 pixels in most browsers).
   Percent % to avoid IE ems bugs and .01 to fix rounding errors when scaling font size in older Opera versions
*/
html * { font-size: 100.01% }

/* Standard 13px font size and 20px line height */
body {
	font-size: 81.25%; /* 16px default x 81.25 = 13px */
	line-height:1.54em; /* approximately 20px at default text size of 13px */
}

/* Reset monospaced elements to default font size in Gecko browsers */
textarea, pre, tt, code {
	font-family:'Andale Mono', 'Lucida Console', monospace;  	
}

/* Correct font size for Safari. 100% is a bit too large, so make it 99% */
select, input, textarea {
	font-size: 99%;
}

/* Bump up font-size in browsers other than IE to get to 13px equivalent */
pre, code {
	font-size: 120%;
	white-space: pre;
}

/* General reset, based on Eric Meyer's reset */
html,body,div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
}

/* clear the default borders */
fieldset, a img { border: 0 solid; }

/* clear out quotes */
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* Focus is defined only on appropriate elements and sometimes with something different than an outline */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins { text-decoration: underline; }
del { text-decoration: line-through; }
strong, dfn { font-weight: bold; }
em, dfn, cite { font-style: italic; }
sup { bottom: 1ex; }
sub { top: .5ex; }
small { font-size: 12px; }

/* Tables */
table {
	border-collapse: collapse;
	border-spacing: 0; /* tables still need 'cellspacing="0"' in the markup */
	margin-bottom: 1.54em; /* give a bottom margin, just like <p> tags, etc. */
}
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }
table.full { width: 100%; }
table.fixed { table-layout:fixed }

/* Start adding some real typographic and color style */

html {
	background-color: #ccc;
}

/* Force scrollbar so layout doesn't jump between navigation from short to long pages */
html { height: 100%; margin-bottom: 1px; }

body {
	font-family: Georgia,"Times New Roman",Times,serif;
	color: #2f2f2f;
	position: relative;
}



/* Headings */
h1,h2,h3,h4 {color:#000;}


/* Links */  
.menu a {
	text-decoration: none;
}
p a, ul a, ol a, dl a, blockquote a, table a { 
	text-decoration: underline;
}

/* Make sure it looks like a quote/citation */
blockquote, address  {
	font-style: italic;
}
blockquote { color: #666; margin-left: 1.2em; }

/* Make acronyms and abbreviations a bit distinct */
abbr[title], acronym[title], dfn[title] { cursor: help; border-bottom: .1em dotted #c00; }
acronym { text-transform: uppercase; }

/* keep the 20px vertical rhythm with bottom margins */
p, ul, ol, dl, blockquote {
	margin-bottom: 1.54em;
}

/* monospace */
code, pre {  line-height: 15px; }
var, kbd, samp, code, pre { font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace; background: #fafafa; }
kbd { font-weight: bold; }
samp, var { font-style: italic; }
pre { white-space: pre; overflow: auto; padding: 10px; border: 1px solid #ddd; clear: both; }
code { padding: 0px 3px; }


caption { text-align: left; }

/* Forms */
input, textarea, button { font-family: "Lucida Grande";background: #fafafa; border-color: #666; border-style: solid; border-width: 1px; color: #444; }
input, textarea { padding: 3px; }
button { padding: 2px 10px; cursor: pointer; }
input:focus, textarea:focus, button:hover { background: #fff; border-color: #777 #ccc #ccc #777; }


ol, ul {
	padding-left: 0;
	margin-left: 1.2em;
}
/* nested lists */
li ul, li ol { margin-bottom: 0; }
ul ul, ol ol, ul ol, ol ul { margin-bottom: 0; }

ol { list-style-type: decimal; }

ul { list-style: disc outside; }
ul ul { list-style: circle outside; }
ul ul ul { list-style: square outside; }

dt { font-weight: bold; }



/*****************************************************************************
= Global utility styles
******************************************************************************
These are generally classes that are used to impart the same style attributes
in every case and context. Some are also used for development and debugging.

*/

/* Document wrapper. Constrains the width of the centered page. */
.pageW,
.pagePad,
.contentPad {
	margin:0 auto;
	text-align: left; /* necessary to override the IE5/6 page centering hack used in grids.css */
	position: relative;
}
.pageW,.docWrap {
		width: 960px;
}
.liquid .pageW {
	min-width: 960px;
}
.pagePad {
	width: 920px;
	padding: 0 20px; /* keep a litte space between edge of pages and the viewport/scrollbars */
}
.contentPad {
	width: 946px;
	padding: 0 31px;
}
.liquid .pageW,
.liquid .pagePad,
.liquid .contentPad {
	width: auto;
}


/* Elements needing easy clearing fix. 
   See: http://www.positioniseverything.net/easyclearing.html
        http://www.456bereastreet.com/archive/200603/new_clearing_method_needed_for_ie7/#comment28
	    (alternative overflow:hidden) http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
		overflow:hidden causes elements with negative margins protruding outside the container to be clipped
 */


#header:after,
#sectHeader:after,
#content:after,
#footer:after,
.docWrap:after,
.hd:after,
.bd:after,
.ft:after,
.mediaBlockLt:after,
.mediaBlockRt:after,
.mediaBlockLt .text:after,
.mediaBlockRt .text:after,
.row:after,
.line:after,
.cols:after,
.bar:after,
.tiles:after,
.toolbar:after,
.btnBar:after,
.hList:after,
.blockList:after,
.clearFix:after {
  content: '[.]';
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
}

#header,
#sectHeader,
#content,
#footer,
.docWrap,
.hd,
.bd,
.ft,
.mediaBlockLt,
.mediaBlockRt,
.mediaBlockLt .text,
.mediaBlockRt .text,
.row,
.line,
.cols,
.bar,
.tiles,
.toolbar,
.btnBar,
.hList,
.blockList
.clearFix { 
	display: inline-block; /* Trigger hasLayout in IE7. see http://www.tanfa.co.uk/css/examples/haslayout/tripswitch-demo.asp*/
}
#header,
#sectHeader,
#content,
#footer,
.docWrap,
.hd,
.bd,
.ft,
.mediaBlockLt,
.mediaBlockRt,
.mediaBlockLt .text,
.mediaBlockRt .text,
.row,
.line,
.cols,
.bar,
.tiles,
.toolbar,
.btnBar,
.hList,
.blockList,
.clearFix { 
	display: block;
}

* html #header,
* html #sectHeader,
* html #content,
* html #footer,
* html .docWrap,
* html .hd,
* html .bd,
* html .ft,
* html .mediaBlockLt,
* html .mediaBlockRt,
* html .mediaBlockLt .text,
* html .mediaBlockRt .text,
* html .row,
* html .line,
* html .cols,
* html .bar,
* html .tiles,
* html .toolbar,
* html .btnBar,
* html .hList,
* html .blockList,
* html .clearFix { height:1px; } /* Trigger haslayout for IE6. Placed here to keep the clearfix rules together */



#sectHeader,
#content,
#footer,
.hd,
.bd,
.ft,
.row {
	clear:both;
}
#header1a,
#sectHeader1a,
#content1a,
#footer1a {
	position: relative;
}

.x1, .x1 span,.x2, .x2 span, .x3, .x3 span, .x4, .x4 span {position: absolute; display: block;}
/*.x1{z-index:1;} .x2{z-index:2;} .x3{z-index:3;} .x4{z-index:4;} .hd,.bd,.ft{z-index: 5;}*/

/* Float clearing fix using a clearing element (div or br) with a class of .clearer */
.clear {
	clear: both;
}

/* Elements using Phark text image replacement. See http://www.mezzoblue.com/tests/revised-image-replacement/ */
.imgReplace,
.ir {
	text-indent: -3000em; /* Hide text for image replacement far off of left screen. */
	overflow: hidden;
}
.imgReplace a,
.ir a {
	cursor: pointer;
}
.left {
	float: left;
}
.right {
	float: right;
}


.vCenterOuter {
	display: table !important;
	#position: relative;
}
.vCenterInner {
	display: table-cell;
	#position: absolute;
	#top: 50%;
	vertical-align: middle;
}
.vCenter {
	#position: relative;
	#top: -50%;
}

.posTr,.posTl,.posBr,.posBl{position: absolute;}
.posTr{top:0;right:0;}
.posTl{top:0;left:0;}
.posBr{bottom:0;right:0;}
.posBl{bottom:0;left:0;}



/* Proportion grids */
.row,.line,.cols,.bar,.tiles {display: block; clear: both; width: 100%;}
.unit{float:left; width: auto;}
.lastUnit {overflow: hidden;} /* causes right column */
.lastUnit,.size1of1 {float:none;}
.size1of2,.tiles2>*,.gallery2>*{width:50%;}
.size1of3,.tiles3>*,.gallery3>*{width:33.33333%;}
.size2of3{width:66.66666%;}
.size1of4,.tiles4>*,.gallery4>*{width:25%;}
.size3of4{width:75%;}
.size1of5,.tiles5>*,.gallery5>*{width:20%;}
.size2of5{width:40%;}
.size3of5{width:60%;}
.size4of5{width:80%;}
.size1of6,.tiles6>*,.gallery6>*{width:16.6666%;}
.size5of6{width:83.3333%;}
.size1of7,.tiles7>*,.gallery7>*{width: 14.286%;}
.size2of7{width: 28.57%;}
.size3of7{width: 42.857%;}
.size4of7{width: 57.143%;}
.size5of7{width: 71.43%;}
.size6of7{width: 85.71%;}
.sizelof8,.tiles8>*,.gallery8>*{width:12.5%;}
.size3of8{width:37.5%;}
.size5of8{width:62.5%;}
.size7of8{width:87.5%;}
.size1of9,.tiles9>*,.gallery9>*{width:11.1111%;}
.size4of9{width:44.4444%;}
.size5of9{width:55.5555%;}
.size7of9{width:77.7777%;}
.size8of9{width:88.8888%;}
.size1of10,.tiles10>*,.gallery10>*{width:10%;}
.size3of10{width:30%;}
.size7of10{width:70%;}
.size9of10{width:90%;}
.size1of12,.tiles12>*,.gallery12>*{width:8.3333%;}
.size5of12{width:41.6666%;}
.size7of12{width:58.3333%}
.size11of12{width:91.6666%;}


/*

gallery classes don't create equal height columns, tiles classes do.

gallery/tiles2
specify number of equal-width columns. Width is determined by class. ceiling(totalUnits/cols) rows.
Adding units doesn't change column width and adds new rows.

gallery/tilesBar (uses JS for IE<8)
apply percentage width to each unit equal (totalUnits/10 * 100). Only one row. Tiles are completely liquid.
Adding units lessens column widths and doesn't add new rows.

tiles-200 (uses JS)
create tiles that are roughly the width specified by -[...]
Adding units slightly increases or decreases column widths and adds new rows.

*/

.galleryRow>.unit {width: 50%;} /* default, in case nothing is specified */
.equalize,.tiles,.tilesRow { overflow:visible; display:table; table-layout:fixed; }
.equalize>.unit,.tiles>.unit,.tilesRow>.unit {
  display:table-cell; vertical-align:top;
  float:none; margin:0; overflow:hidden;
}
.tilesRow {
	width: 100%;
}

.bar {
	height: 2em;
	padding: 8px;
}

/* We almost always want icons centered vertically */
.iconLink img,
  img.icon {
	vertical-align: middle;
}

.uberMore {
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0;
	padding: 0;
}
.uberMore a {
	text-decoration: none;
}

.dblArrow {
	font-family: Arial;
	font-size: 130%;
	position: relative;
	line-height: 72.8%;
}

.helpLink {
	cursor: help;
}

/* http://unstoppablerobotninja.com/entry/fluid-images/ */
img,
object {
	max-width: 100%;
	-ms-interpolation-mode: bicubic; // for smoother scaled image rendering in IE7+
}
.uaLthFF2 img.fluid,
.uaLthFF2 .fluidImg img,
.uaLthFF2 object.fluid,
.uaLthFF2 .fluidObj object {
	max-width: none;
}

/* Classes for invisible elements */
.skip, .hide, .print {
  position: absolute;
  top: -1000em;
  left: -1000em;
  height: 1px;
  width: 1px;
}

/* Make skip links visible when using tab navigation */
.skip:focus, .skip:active {
  position: static;
  top: 0;
  left: 0;
  height: auto;
  width: auto;
}

.box,
.mod {
	margin-bottom: 1.54em;
	padding: 0 8px 0 7px;
	position: relative;
	clear: both;
}
.hd,.bd,.ft {position: relative;}
.mod .bd p.last,
.mod .bd ul.last,
.mod .bd ol.last,
.mod .bd dl.last,
.mod .bd blockquote.last,
.mod .bd table.last {
	margin-bottom: 0;
}
.lastMod { margin-bottom: 0 !important;}

.ltMod,.ltMods .mod{padding-left:0;}
.rtMod,.rtMods .mod{padding-right:0;}

/* Media Blocks */
.mediaBlockLt .media {float:left;margin-right: 8px;}
.mediaBlockRt .media{float:right;margin-left: 8px;}
.wrap .text{ _float:none; overflow:visible;}
.wrap .media{margin:10px !important;}
/* Images acting like media blocks */
img.alignleft { float: left; margin-right: 20px; margin-top: 5px; }
img.alignright { display: block; float: right; margin-left: 20px; margin-top: 5px; }
img.aligncenter { margin-left: auto; margin-right: auto; display: block; clear: both; margin-top: 5px; }



.captionBlock img, .captionBlock object, .captionBlock dt { padding:0; display: block; }
.captionBlock strong, .captionBlock dd { display:block; overflow:hidden; margin-top: 2px; padding: 0.3em 0.5em; background: #eee; font-weight: normal; font-size: 91.667%; }




.sidebar,.sidebarLt, .sidebarRt {display: block;}
.sidebarLt { float: left; margin: 0 10px 0 10px;}
.sidebar,.sidebarRt {float: right;margin: 0 0 10px 10px;}

.hLabelBlock {
	overflow:hidden; _overflow:visible; zoom:1;
}
.hLabelBlock .label {
	float: left;
	text-align: right;
}
.hLabelBlock .labelContents {
	float: left;	
}

.hList,
.hList ul,
.blockList,
.blockList ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.hList li {
	float: left;
}

.hiPad{padding:20px;}
.midPad{padding:15px;}
.loPad{padding:10px;}
.noPad{padding:0;}
.noBotM{margin-bottom:0;}
.noPadL{padding-left:0;}
.noPadR{padding-right:0;}
.hairPad{padding: 3px 7px;}

/* Generic dark overlay for modal dialogs, etc.
   -------------------------------------------- */
.overlay, 
.overlayDarken,
.overlayLighten {

	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.overlay, .overlayDarken { 
	background-color: #000;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
}
.overlayLighten {
	background-color:#fff;
	-moz-opacity: 0.5;
	opacity:.50;
	filter: alpha(opacity=50);
}

/* Generic highlighted information box
   ----------------------------------- */
.msg, .infoBox, .highlightBox {
	margin-bottom: 1.54em;
	background-color: #FFFFCC;
	padding: .615em 10px;
	border: 2px solid #F3EEB3;
	position: relative;
}


/* Generic line divider
   -------------------- */
hr {
	color: #fff;
	background: transparent;
	border: 0;
	height: 1px;
}
hr, .divider {
	border-bottom: 1px #eee solid;
	margin: 0 0 1.54em 0;
}
.divider hr {
	position: absolute;
	left: -5000px;
	height: 1px;
}


/* Toolbar positioned top-right panel-style 
   ---------------------------------------- */
.mod .hd .toolbar {
	vertical-align: middle;
	position: absolute !Important;
	right: 0px;
	top: 0;
	display: block;
	width: auto;
}

/* Basic Alignments */
.left,.alignleft { float: left; }
.right,.alignright { float: right; }
.center,.aligncenter { margin-left: auto; margin-right: auto; display: block; clear: both; }

.quiet{color:#666;}
.loud{color:#000;font-weight:bold;}


.note,.important {background: #ffd; }
.highlight { background:#ff0; }

.success,.ok,.yes,.go,.added,.correct{color:#060;/* green */}
.fail,.no,.stop,.error,.removed,.wrong,.warning{color:#f00;/* red */}

